<template>
  <div class="container">
    <el-row class="main-content" justify="center" type="flex">
      <el-col class="main-content-left" :span="6">
        <div style="padding: 10px">
          <h2 :class="['animate__heartBeat']"
              style="font-weight: 600;text-align: center; text-shadow: 5px 5px 14px rgba(0, 0, 0, 0.5);">
            非遗文化导航
          </h2>
          <div style="display: flex;align-items: center;justify-content: space-between"
               class="main-content-left-search">
            <el-input style="width: 250px" v-model="queryParams.name" placeholder="请输入项目名"></el-input>
            <div class="main-content-left-search-button" @click="handleQuery">
              <img style="width: 30px;cursor: pointer" alt="" src="@/assets/image/搜索.png">
            </div>
            <div class="main-content-left-search-button" @click="handleReset">
              <img style="width: 35px;cursor: pointer" alt="" src="@/assets/image/5_重置.png">
            </div>
          </div>
          <br>
          <el-scrollbar v-if="cultureProject.length" class="infinite-list" style="overflow-y:auto;height: 600px">
            <div v-infinite-scroll="load">
              <el-card style="background-color: white;margin: 10px 0" v-for="project in cultureProject"
                       :key="project.id"
                       class="box-card infinite-list-item" shadow="hover">
                <div @click="queryMap(project.location)">
                  <div slot="header" class="clearfix">
                    <span>{{ project.name }}</span>
                  </div>
                  <div class="text item">
                    <p><strong>地区:</strong> {{ project.location }}</p>
                  </div>
                </div>
              </el-card>
              <div style="text-align: center">
                <p v-if="loading">加载中...</p>
                <p v-if="noMore">没有更多了</p>
              </div>
            </div>
          </el-scrollbar>
          <el-empty v-else description="快去申报非遗吧"></el-empty>
        </div>
      </el-col>
      <el-col class="main-content-right" :span="14">
        <div style="padding: 10px">
          <MapComponent :location="location"></MapComponent>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {queryCulture} from "@/api/request/CultureMapRequest";
import MapComponent from "@/components/MapComponent.vue";

export default {
  name: "CultureMapView",
  components: {MapComponent},
  data() {
    return {
      total: 0,
      userInfo: {},
      cultureProject: [],
      loading: false,
      count: 0,
      queryParams: {
        currentPage: 1,
        pageSize: 10,
        name: null
      },
      location: ""
    };
  },
  computed: {
    noMore() {
      return this.queryParams.pageSize >= this.total
    }
  },
  methods: {
    queryMap(location) {
      this.location = location
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        if (this.queryParams.pageSize <= this.total) {
          this.queryParams.pageSize += 2
          this.loading = false;
          this.getList()
        }
      }, 1000)
    },
    getList() {
      queryCulture(this.queryParams).then(res => {
        if (res.code !== 200) {
          this.$message.error(res.msg);
          return;
        }
        this.total = res.data.total;
        this.cultureProject = res.data.list;
      }).catch(error => {
        console.log(error)
      });
    },
    handleQuery() {
      this.getList();
    },
    handleReset() {
      this.queryParams = {
        currentPage: 1,
        pageSize: 10,
        description: null
      }
      this.getList();
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style>
.el-card {
  cursor: pointer;
  transition: all .5s;
  background: url("@/assets/image/bj.png") no-repeat;
  background-size: contain;
  text-align: center;
}
</style>
<style lang="scss" scoped>
@import 'animate.css';
@import "@/assets/css/CultureMapView.css";
</style>
